<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>阿福易购-收货地址</title>
    <link rel="stylesheet" href="/css/app.css">
</head>
<body ontouchstart="">
<header class="ui-header ui-header-stable    af-header">
    <ul class="ui-row-flex">
        <li class="ui-col ui-flex ui-flex-pack-start" ontouchstart="window.history.back()" >
            <i class="ui-icon-return af-icon-home"></i>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-center">
            <h1>收货地址</h1>
        </li>
        <li class="ui-col ui-flex ui-flex-pack-end">
        </li>
    </ul>
</header>


<footer class="ui-footer af-footer">
    <div class="ui-btn-wrap" style="margin-top: -10px;">
        <button class="J-submit ui-btn-lg ui-btn-danger" >
            保存
        </button>
    </div>
</footer>

<div class="ui-container"  >

    <div class="ui-form">
        <form id="form" action="#">
            <div class="ui-form-item ui-border-b">
                <label for="areaInput">
                    所在地区
                </label>
                <input id="areaInput" type="text" name="input_area" placeholder="请选择所在地区" required readonly/>
                <input id="areaIds" type="hidden" name="position_ids" value=""/>
                <input type="hidden" name="id" value=""/>
                <input type="hidden" name="province" value=""/>
                <input type="hidden" name="city" value=""/>
                <input type="hidden" name="district" value=""/>
            </div>
            <div class="ui-form-item ui-form-item-textarea ui-border-b">
                <label for="address">
                    详细地址
                </label>
                <textarea id="address" name="address" placeholder="无需重复填写省市区，小于75个字" data-reg-msg="请输入详细地址" maxlength="75" required></textarea>
            </div>
            <div class="ui-form-item ui-border-b">
                <label for="consignee">
                    收获人姓名
                </label>
                <input id="consignee" type="text" name="consignee" placeholder="请输入收货人姓名" required>
                <a href="#" class="ui-icon-close af-hide"></a>
            </div>
            <div class="ui-form-item ui-border-b">
                <label for="id_card">
                    身份证号码
                </label>
                <input id="id_card" type="text" name="id_card" placeholder="18位身份证号码" data-reg="(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$)" required>
                <a href="#" class="ui-icon-close af-hide"></a>
            </div>
            <div class="ui-form-item ui-border-b">
                <label for="mobile">
                    手机号码
                </label>
                <input id="mobile" type="text" name="mobile" placeholder="请输入手机号码" data-reg="^1[3|4|5|7|8]\d{9}$" required>
                <a href="#" class="ui-icon-close af-hide"></a>
            </div>
            <div class="ui-form-item ui-form-item-switch ui-border-b">
                <p>
                    设为默认地址
                </p>
                <label class="ui-switch">
                    <input type="checkbox" name="is_default">
                </label>
            </div>
        </form>
    </div>
</div>



<script src="/lib/zepto.min.js"></script>
<script src="/js/frozen.js"></script>
<script src="/js/app.min.js"></script>
<!--省市区联动-->
<link rel="stylesheet" href="/js/LArea/LArea.min.css">
<script src="/js/LArea/LAreaData1.js"></script>
<script src="/js/LArea/LArea.min.js"></script>

<script>
    $(function () {
        var form=$('#form');
        //表单验证
        $('.J-submit').on('click',function () {form.submit();});

        form.on('submit',function () {
            var isOK= RegForm(form);
            if(!isOK) return isOK;
            MyAjax(form.attr('action'),'post',form.serialize(),function (res) {
               if(res.status){
                   window.location.href='';
               }
            });
        });

        //省市区
        initAreaSelect({
            trigger:'#areaInput',
            valueTo:'#areaIds'
        });

        //地址变更
        $('#areaInput').on('input',function () {
            var that=$(this),valArr=that.val().split(',');
            var province=that.siblings('[name="province"]');
            var city=that.siblings('[name="city"]');
            var district=that.siblings('[name="district"]');
            if(valArr.length==3){
                province.val(valArr[0]);
                city.val(valArr[1]);
                district.val(valArr[2]);
            }else{
                province.val('');
                city.val('');
                district.val('');
            }
        });
    });
</script>
</body>
</html>